<template>
  <!-- 历史数据页面 -->
  <div class="history-container" >
    <div class="history">
      <menu-element />
    </div>
    <div>
      <el-button class="btn-nav-bg stripe-btn" @click="$router.go(-1)">返回</el-button>
    </div>

    <div class="content">
      <el-tabs v-model="activeTabName" type="border-card">
        <!--        <div v-show="activeTabName == 2" class="left-content">-->
        <!--          <selectCardTwo ref="selectCard"></selectCardTwo>-->
        <!--        </div>-->
        <el-tab-pane name="1" label="告警历史">
          <warnHistory :curParamName="curParamName" ref="warnHistory"></warnHistory>
        </el-tab-pane>
        <!-- <el-tab-pane name="2" label="历史数据">
          <fukang-history-component :type="type" ref="history1"></fukang-history-component>
        </el-tab-pane>

        <el-tab-pane name="3" label="家族对比">
          <fukang-family-p-k :type="type" ref="history3"></fukang-family-p-k> 
        </el-tab-pane> -->
      </el-tabs>
    </div>
  </div>
</template>
<script>
import WarnHistory from "./components/warnHistory.vue";
import MenuElement from "@/components/MenuElement/index.vue";

// import selectCardTwo from "./selectCardTwo.vue";
export default {
  name: "historyState",
  props: {
    type: {
      type: String,
      default: "",
    },
  },
  components: {
    // selectCardTwo,
    WarnHistory,
    // history1,
    // history2,
    // history3,
    // history4,
    MenuElement,
  },
  data() {
    return {
      activeTabName: "1",
      curParamName: "",
    };
  },
  destroyed() { },
  mounted() {
    this.curParamName = this.$route.query.paramName;
  },
  methods: {},
};
</script>
<style scoped lang="less">
.history-container {
  height: 100%;
  position: relative;

  .history {
    position: absolute;
    // top: 35px;
    right: 20px;
    z-index: 9999;
    display: flex;
    align-items: center;
  }

  .top {
    height: 60px;
    display: flex;
    align-items: center;
    color: #fff;

    .fanhui-btn {
      cursor: pointer;

      span {
        margin-left: 5px;
      }
    }

    .lujing {
      margin-left: 50px;
    }
  }

  ::v-deep .content {
    height: 100%;

    .el-tabs {
      height: 100%;

      .el-tabs__content {
        height: calc(100% - 40px);

        .left-content {
          position: absolute;
          height: calc(100% - 30px);
        }

        .el-tab-pane {
          height: 100%;
        }
      }
    }
  }
}

.tab-pane-wrapper {
  height: 100%;
  //display: flex;
  //.content-right {
  //  flex: 1;
  //  height: 100%;
  //  margin-left: 20px;
  //  padding: 20px;
  //  border: 1px solid #006686;
  //  .form-search {
  //    margin-bottom: 16px;
  //    .fastTimeBtn {
  //      color: #c6d3ec;
  //      font-size: 16px;
  //      font-weight: 500;
  //      margin-right: 16px;
  //      cursor: pointer;
  //    }
  //  }
  //}
}
</style>
